import React, { Component } from 'react';
import { useState } from 'react';
import '../DshBoard/index.css';
const Dashboard = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: '运动', completed: true },
    { id: 2, text: '吃早餐', completed: true },
    { id: 3, text: '去书店', completed: false },
  ]);
  const [filter, setFilter] = useState('all');
  const filteredTasks = tasks.filter((task) => {
    if (filter === 'completed') return task.completed;
    if (filter === 'active') return !task.completed;
    return true;
  });
  // 处理input
  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      setTasks([...tasks, { id: tasks.length + 1, text: inputText, completed: false }]);
      setInputText('');
    }
  };
  const [inputText, setInputText] = useState('');
  return (
    <div>
      <div className='toolist'>
        <input type="text" placeholder="请输入任务名称"
          value={inputText}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <ul className='list'>
          {filteredTasks.map((task) => (
            <li key={task.id}>
              <input type="checkbox" checked={task.completed}
                onChange={() => {
                  setTasks(tasks.map((t) => (t.id === task.id ? { ...t, completed: !t.completed } : t)));
                }}
              />
              <span>{task.text}</span>
            </li>
          ))}
        </ul>
        <div>
          <button onClick={() => setFilter('all')}>全部</button>
          <button onClick={() => setFilter('completed')}>已完成</button>
          <button >未完成</button>
          <button >清除已完成任务</button>
        </div>
      </div>
      {/* 按钮 */}

    </div>
  );
}
export default Dashboard;
